[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import IOSInterface from "../IOSInterface" export default function Page() { return } [V0_FILE]typescriptreact:file="components/StatusBar.tsx" isQuickEdit="true" "use client" import { Battery, Signal, Wifi } from "lucide-react" interface StatusBarProps { currentTime: Date } export default function StatusBar({ currentTime }: StatusBarProps) { const formatTime = (date: Date) => { return date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: false, }) } return (

{/* Left side - Time */}

{formatTime(currentTime)}

{/* Right side - Status icons */}

100%

) } [V0_FILE]typescriptreact:file="components/LockScreen.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { ChevronUp, Camera, Flashlight } from "lucide-react" interface LockScreenProps { currentTime: Date onUnlock: () => void } export default function LockScreen({ currentTime, onUnlock }: LockScreenProps) { const [touchStart, setTouchStart] = useState(null) const [swipeDistance, setSwipeDistance] = useState(0) const formatTime = (date: Date) => { return date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: false, }) } const formatDate = (date: Date) => { return date.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", }) } const handleTouchStart = (e: React.TouchEvent) => { setTouchStart(e.touches[0].clientY) } const handleTouchMove = (e: React.TouchEvent) => { if (!touchStart) return const currentTouch = e.touches[0].clientY const distance = touchStart - currentTouch if (distance > 0) { setSwipeDistance(Math.min(distance, 100)) } } const handleTouchEnd = () => { if (swipeDistance > 50) { onUnlock() } setSwipeDistance(0) setTouchStart(null) } const handleMouseDown = (e: React.MouseEvent) => { setTouchStart(e.clientY) } const handleMouseMove = (e: React.MouseEvent) => { if (!touchStart) return const distance = touchStart - e.clientY if (distance > 0) { setSwipeDistance(Math.min(distance, 100)) } } const handleMouseUp = () => { if (swipeDistance > 50) { onUnlock() } setSwipeDistance(0) setTouchStart(null) } return (

{/* Time Display */}

{formatTime(currentTime)}

{formatDate(currentTime)}

{/* Swipe indicator */}

Swipe up to unlock

{/* Bottom controls */}

) } [V0_FILE]typescriptreact:file="components/HomeScreen.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { MessageCircle, Phone, Mail, Music, Camera, Settings, Calendar, Clock, Calculator, Map, CloudRainWindIcon as Weather, ImagesIcon as Photos, Lock, } from "lucide-react" interface HomeScreenProps { onLock: () => void } export default function HomeScreen({ onLock }: HomeScreenProps) { const [currentPage, setCurrentPage] = useState(0) const apps = [ [ { name: "Messages", icon: MessageCircle, color: "bg-green-500" }, { name: "Phone", icon: Phone, color: "bg-green-600" }, { name: "Mail", icon: Mail, color: "bg-blue-500" }, { name: "Music", icon: Music, color: "bg-red-500" }, { name: "Camera", icon: Camera, color: "bg-gray-600" }, { name: "Settings", icon: Settings, color: "bg-gray-500" }, { name: "Calendar", icon: Calendar, color: "bg-red-600" }, { name: "Clock", icon: Clock, color: "bg-black" }, { name: "Calculator", icon: Calculator, color: "bg-gray-800" }, { name: "Maps", icon: Map, color: "bg-green-700" }, { name: "Weather", icon: Weather, color: "bg-blue-400" }, { name: "Photos", icon: Photos, color: "bg-yellow-500" }, ], ] const AppIcon = ({ app }: { app: any }) => { const IconComponent = app.icon return (

{app.name}

) } return (

{/* App Grid */}

{apps[currentPage].map((app, index) => ( ))}

{/* Page Indicators */}

{apps.map((_, index) => (

))}

{/* Dock */}

{/* Home Indicator */}

) } [V0_FILE]typescriptreact:file="components/WallpaperControls.tsx" "use client" import { useState } from "react" import { Settings, X, RotateCcw, Play, Pause } from "lucide-react" interface WallpaperControlsProps { offsetX: number offsetY: number zoom: number speed: number autoMove: boolean onOffsetXChange: (value: number) => void onOffsetYChange: (value: number) => void onZoomChange: (value: number) => void onSpeedChange: (value: number) => void onAutoMoveChange: (value: boolean) => void onReset: () => void } export default function WallpaperControls({ offsetX, offsetY, zoom, speed, autoMove, onOffsetXChange, onOffsetYChange, onZoomChange, onSpeedChange, onAutoMoveChange, onReset, }: WallpaperControlsProps) { const [isOpen, setIsOpen] = useState(false) return ( <> {/* Settings Button */} {/* Controls Panel */} {isOpen && (

{/* Header */}

Wallpaper Controls

{/* Controls */}

{/* Position Controls */}

Horizontal Position onOffsetXChange(Number.parseFloat(e.target.value))} className="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer slider" />

{offsetX.toFixed(1)}

Vertical Position onOffsetYChange(Number.parseFloat(e.target.value))} className="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer slider" />

{offsetY.toFixed(1)}

{/* Zoom Control */}

Zoom onZoomChange(Number.parseFloat(e.target.value))} className="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer slider" />

{zoom.toFixed(1)}x

{/* Speed Control */}

Animation Speed onSpeedChange(Number.parseFloat(e.target.value))} className="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer slider" />

{speed.toFixed(1)}x

{/* Auto Movement Toggle */}

Auto Movement

{/* Reset Button */}

)} ) } [V0_FILE]typescriptreact:file="TweetGLSLVisualization.tsx" isFixed="true" isQuickEdit="true" "use client" import { useRef, useEffect } from "react" interface TweetGLSLVisualizationProps { offsetX?: number offsetY?: number zoom?: number speed?: number autoMove?: boolean } export default function TweetGLSLVisualization({ offsetX = 0, offsetY = 0, zoom = 1, speed = 1, autoMove = true, }: TweetGLSLVisualizationProps) { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const gl = canvas.getContext("webgl2") if (!gl) { console.error("WebGL2 not supported") return } const resizeCanvas = () => { const parent = canvas.parentElement if (parent) { canvas.width = parent.clientWidth canvas.height = parent.clientHeight } else { canvas.width = 375 canvas.height = 812 } gl.viewport(0, 0, canvas.width, canvas.height) } resizeCanvas() window.addEventListener("resize", resizeCanvas) // Vertex shader source const vertexShaderSource = `#version 300 es in vec4 a_position; void main() { gl_Position = a_position; } ` // Fragment shader source - EXACT copy of original with added controls const fragmentShaderSource = `#version 300 es precision highp float; out vec4 outColor; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; uniform vec2 u_offset; uniform float u_zoom; vec3 hsv(float h,float s,float v){ vec4 t=vec4(1.,2./3.,1./3.,3.); vec3 p=abs(fract(vec3(h)+t.xyz)*6.-vec3(t.w)); return v*mix(vec3(t.x),clamp(p-vec3(t.x),0.,1.),s); } void main(){ vec2 r=u_resolution; vec2 FC=gl_FragCoord.xy; // Apply transformations FC = (FC + u_offset * 50.0) / u_zoom; float t=u_time; vec4 o=vec4(0,0,0,1); float i,e,R,s; vec3 q,p,d=vec3(FC.yx/r.x+vec2(.7),.8); for(q.yz--;i++<99.;){ o+=.023-exp(-e*3e3)*.045*vec4(1,vec3(.7,.6,0)); s=1.; p=q+=d*e*R*.15; p=vec3(log2(R=length(p)),exp(-p.z/R+.5),p.y-t*.5); for(e=--p.y;s<1.2e3;s+=s) e-=.055-abs(dot(cos(p.xxx*s),-cos(t-p*s)))/s*.15; } outColor=o; } ` // Create shader function const createShader = (type: number, source: string) => { const shader = gl.createShader(type) if (!shader) return null gl.shaderSource(shader, source) gl.compileShader(shader) if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error("Shader compilation error:", gl.getShaderInfoLog(shader)) gl.deleteShader(shader) return null } return shader } // Create shaders const vertexShader = createShader(gl.VERTEX_SHADER, vertexShaderSource) const fragmentShader = createShader(gl.FRAGMENT_SHADER, fragmentShaderSource) if (!vertexShader || !fragmentShader) { console.error("Failed to create shaders") return } // Create and link program const program = gl.createProgram() if (!program) { console.error("Failed to create program") return } gl.attachShader(program, vertexShader) gl.attachShader(program, fragmentShader) gl.linkProgram(program) if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { console.error("Program linking error:", gl.getProgramInfoLog(program)) return } // Set up vertex buffer const positionBuffer = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer) gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW) // Get attribute and uniform locations const positionAttributeLocation = gl.getAttribLocation(program, "a_position") const resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution") const mouseUniformLocation = gl.getUniformLocation(program, "u_mouse") const timeUniformLocation = gl.getUniformLocation(program, "u_time") const offsetUniformLocation = gl.getUniformLocation(program, "u_offset") const zoomUniformLocation = gl.getUniformLocation(program, "u_zoom") // Set up vertex array const vao = gl.createVertexArray() gl.bindVertexArray(vao) gl.enableVertexAttribArray(positionAttributeLocation) gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer) gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0) // Mouse interaction let mouseX = 0.5 let mouseY = 0.5 const handleMouseMove = (event: MouseEvent) => { const rect = canvas.getBoundingClientRect() mouseX = (event.clientX - rect.left) / rect.width mouseY = 1.0 - (event.clientY - rect.top) / rect.height } canvas.addEventListener("mousemove", handleMouseMove) // Auto movement let autoMouseX = 0.5 let autoMouseY = 0.5 let mouseTime = 0 let animationId: number const render = () => { const currentTime = ((Date.now() - startTime) / 1000) * speed mouseTime += 0.01 if (autoMove) { autoMouseX = 0.5 + Math.sin(mouseTime * 0.3) * 0.1 autoMouseY = 0.5 + Math.cos(mouseTime * 0.2) * 0.1 } gl.clearColor(0, 0, 0, 1) gl.clear(gl.COLOR_BUFFER_BIT) gl.useProgram(program) gl.bindVertexArray(vao) // Set uniforms if (resolutionUniformLocation) { gl.uniform2f(resolutionUniformLocation, canvas.width, canvas.height) } if (mouseUniformLocation) { gl.uniform2f(mouseUniformLocation, mouseX || autoMouseX, mouseY || autoMouseY) } if (timeUniformLocation) { gl.uniform1f(timeUniformLocation, currentTime) } if (offsetUniformLocation) { gl.uniform2f(offsetUniformLocation, offsetX, offsetY) } if (zoomUniformLocation) { gl.uniform1f(zoomUniformLocation, zoom) } gl.drawArrays(gl.TRIANGLES, 0, 6) animationId = requestAnimationFrame(render) } const startTime = Date.now() animationId = requestAnimationFrame(render) // Cleanup return () => { window.removeEventListener("resize", resizeCanvas) canvas.removeEventListener("mousemove", handleMouseMove) cancelAnimationFrame(animationId) gl.deleteProgram(program) gl.deleteShader(vertexShader) gl.deleteShader(fragmentShader) gl.deleteBuffer(positionBuffer) gl.deleteVertexArray(vao) } }, [offsetX, offsetY, zoom, speed, autoMove]) return (

) } [V0_FILE]typescriptreact:file="IOSInterface.tsx" "use client" import { useState, useEffect } from "react" import TweetGLSLVisualization from "./TweetGLSLVisualization" import StatusBar from "./components/StatusBar" import LockScreen from "./components/LockScreen" import HomeScreen from "./components/HomeScreen" import WallpaperControls from "./components/WallpaperControls" export default function IOSInterface() { const [isLocked, setIsLocked] = useState(true) const [currentTime, setCurrentTime] = useState(new Date()) // Wallpaper control states const [offsetX, setOffsetX] = useState(0) const [offsetY, setOffsetY] = useState(0) const [zoom, setZoom] = useState(1) const [speed, setSpeed] = useState(1) const [autoMove, setAutoMove] = useState(true) useEffect(() => { const timer = setInterval(() => { setCurrentTime(new Date()) }, 1000) return () => clearInterval(timer) }, []) const handleUnlock = () => { setIsLocked(false) } const handleLock = () => { setIsLocked(true) } const handleReset = () => { setOffsetX(0) setOffsetY(0) setZoom(1) setSpeed(1) setAutoMove(true) } return (

{/* iPhone Frame */}

{/* Phone Body */}

{/* Screen Bezel */}

{/* Dynamic Island / Notch */}

{/* Screen Content */}

{/* GLSL Animation Background */}

{/* iOS Interface Overlay */}

{/* Wallpaper Controls */} {/* Status Bar */} {/* Main Content */}

{isLocked ? ( ) : ( )}

{/* Physical Phone Details */} {/* Volume Buttons */}

{/* Power Button */}

{/* Lightning Port */}

{/* Device Info */}

iPhone 15 Pro

Dynamic Wallpaper

) }

About

Tags

Share

About

Tags

Share

More from yoheinishitsuji

More Templates Like This

About

Tags

Share

About

Tags

Share

More from yoheinishitsuji

More Templates Like This